<template>
  <tbody>
    <tr v-for="(item, index) in shopping" :key="index">
      <td>
        <input
          type="checkbox"
          name=""
          id=""
          v-model="item.checked"
          :value="item.checked"

        />
      </td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>
        <button @click="onSub(item)">-</button>
        {{ item.num }}
        <button @click="item.num++">+</button>
      </td>
      <td>{{ sum(item) }}</td>
      <td><button @click="del(item)">删除</button></td>
    </tr>
  </tbody>
</template>

<script>
export default {
  props: ['shopping'],
  data () {
    return {

    }
  },

  methods: {
    onSub (i) {
      if (i.num === 1) return alert('不能再减了')
      i.num--
    },

    del (it) {
      const index = this.shopping.findIndex((item) => {
        return item === it
      })
      this.shopping.splice(index, 1)
    }

  },
  computed: {
    sum () {
      return function (i) {
        return i.price * i.num
      }
    }
  }

}
</script>

<style scoped lang="less"></style>
